import { Outlet } from 'react-router-dom';
import styles from './ManageLayout.module.scss';
import { Button, Space, Divider } from 'antd';
import {
	PlusOutlined,
	StarOutlined,
	MehOutlined,
	DeleteOutlined,
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
const ManageLayout = () => {
	const nav = useNavigate();
	const { pathname } = useLocation();

	return (
		<div className={styles.container}>
			<div className={styles.left}>
				<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
					<Button type="primary" icon={<PlusOutlined />}>
						新建问卷
					</Button>
					<Divider size="middle" style={{ borderTop: 'transparent' }} />
					<Button
						type={pathname === '/manage/list' ? 'default' : 'text'}
						onClick={() => nav('/manage/list')}
						icon={<MehOutlined />}
					>
						我的问卷
					</Button>
					<Button
						type={pathname === '/manage/star' ? 'default' : 'text'}
						onClick={() => nav('/manage/star')}
						icon={<StarOutlined />}
					>
						星标问卷
					</Button>
					<Button
						type={pathname === '/manage/trash' ? 'default' : 'text'}
						onClick={() => nav('/manage/trash')}
						icon={<DeleteOutlined />}
					>
						回收站
					</Button>
				</Space>
			</div>
			<div className={styles.right}>
				<Outlet />
			</div>
		</div>
	);
};

export default ManageLayout;
